<template>
	<div>
		<div class="recommend-title">周末去哪儿</div>
		<ul>
			<li class='item border-bottom' v-for='item of weekendList' :key="item.id">
				<div class="item-wrapper">
					<img :src="item.imgUrl" alt="" class="item-img">
				</div>
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
				</div>
			</li>
		</ul>
	</div>

</template>
<script>
export default {
  name: 'Weekend',
  props: {
    weekendList: Array
  },
  data () {
    return {

    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/mixins.styl'
.recommend-title
	line-height 0.8rem
	background #eee
	text-indent 0.2rem
.item-wrapper
	height 0
	overflow hidden
	padding-bottom 33.9%
	.item-img
		width 100%
.item-info
	padding 0.1rem
	.item-title
		height 0.54rem
		line-height 0.54rem
		font-size 0.32rem
		overflow hidden
		ellipsis()
	.item-desc
		height 0.4rem
		line-height 0.4rem
		color #ccc
		font-size 0.28rem
		ellipsis()
</style>
